<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plant vs Zombies</title>
<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0e68c;
  }
  .grid-container {
    display: grid;
    grid-template-columns: repeat(9, 100px);
    grid-template-rows: repeat(5, 100px);
    gap: 5px;
    position: relative;
    width: 950px; /* Adjusted to fit the grid */
    height: 550px; /* Adjusted to fit the grid */
  }
  .cell {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    position: relative;
  }
  .plant {
    width: 100%;
    height: 100%;
    background-image: url('https://img2.baidu.com/it/u=2570795912,4239440428&fm=253&fmt=auto&app=120&f=JPEG?w=908&h=800');
    background-size: cover;
    pointer-events: none;
  }
  .bullet {
    width: 10px;
    height: 10px;
    background-color: green;
    position: absolute;
    left: 100px;
    top: 45px;
    animation: shoot 1s linear forwards;
  }
  @keyframes shoot {
    to { transform: translateX(800px); }
  }
  .zombie {
    width: 100px;
    height: 100px;
    background-image: url('https://img2.baidu.com/it/u=2386544606,1247232087&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=819');
    background-size: cover;
    position: absolute;
    right: -100px; /* Start outside the grid */
    bottom: 0;
    transition: opacity 0.5s ease-in-out;
  }
  .zombie.dead {
    opacity: 0;
  }
  .game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 10px;
    z-index: 10;
    display: none;
  }
</style>
</head>
<body>

<div class="grid-container"></div>
<div class="game-over" id="gameOver">Game Over!</div>

<script>
const gridContainer = document.querySelector('.grid-container');
const gameOverDiv = document.getElementById('gameOver');

let plants = [];
let zombies = [];

// Create the grid cells
for (let i = 0; i < 45; i++) {
  const cell = document.createElement('div');
  cell.classList.add('cell');
  cell.addEventListener('click', () => placePlant(cell));
  gridContainer.appendChild(cell);
}

function placePlant(cell) {
  if (!plants.includes(cell)) {
    const plant = document.createElement('div');
    plant.classList.add('plant');
    cell.appendChild(plant);
    plants.push(cell);

    // Set up shooting interval for each plant
    setInterval(() => {
      const bullet = document.createElement('div');
      bullet.classList.add('bullet');
      cell.appendChild(bullet);

      setTimeout(() => {
        checkCollision(bullet);
        cell.removeChild(bullet);
      }, 1000);
    }, 2000);
  }
}

function generateZombie() {
  const zombieRow = Math.floor(Math.random() * 5);
  const zombie = document.createElement('div');
  zombie.classList.add('zombie');
  zombie.dataset.health = 10;
  zombie.style.bottom = `${zombieRow * 105}px`;
  gridContainer.appendChild(zombie);
  zombies.push(zombie);

  moveZombie(zombie);
}

function moveZombie(zombie) {
  let position = 0;
  const moveInterval = setInterval(() => {
    position += 1;
    zombie.style.right = `${position}px`;

    if (position >= 900) {
      clearInterval(moveInterval);
      gameover();
    }

    // Check collision with bullets
    Array.from(gridContainer.querySelectorAll('.bullet')).forEach(bullet => {
      const bulletRect = bullet.getBoundingClientRect();
      const zombieRect = zombie.getBoundingClientRect();

      if (bulletRect.right >= zombieRect.left && 
          bulletRect.left <= zombieRect.right &&
          bulletRect.top <= zombieRect.bottom &&
          bulletRect.bottom >= zombieRect.top) {
        const health = parseInt(zombie.dataset.health);
        if (health > 1) {
          zombie.dataset.health = health - 1;
        } else {
          if (gridContainer.contains(zombie)) {
            zombie.classList.add('dead');
            setTimeout(() => {
              gridContainer.removeChild(zombie);
              zombies = zombies.filter(z => z !== zombie);
            }, 3000);
          }
        }
        clearInterval(moveInterval);
      }
    });
  }, 10);
}

setInterval(generateZombie, 5000);

function checkCollision(bullet) {
  zombies.forEach(zombie => {
    const bulletRect = bullet.getBoundingClientRect();
    const zombieRect = zombie.getBoundingClientRect();

    if (bulletRect.right >= zombieRect.left && 
        bulletRect.left <= zombieRect.right &&
        bulletRect.top <= zombieRect.bottom &&
        bulletRect.bottom >= zombieRect.top) {
      const health = parseInt(zombie.dataset.health);
      if (health > 1) {
        zombie.dataset.health = health - 1;
      } else {
        if (gridContainer.contains(zombie)) {
          zombie.classList.add('dead');
          setTimeout(() => {
            gridContainer.removeChild(zombie);
            zombies = zombies.filter(z => z !== zombie);
          }, 3000);
        }
      }
    }
  });
}

function gameover() {
  clearInterval(generateZombie);
  zombies.forEach(zombie => {
    if (gridContainer.contains(zombie)) {
      gridContainer.removeChild(zombie);
    }
  });
  plants.forEach(plant => gridContainer.removeChild(plant.querySelector('.plant')));
  plants = [];
  zombies = [];
  gameOverDiv.style.display = 'block';
}
</script>

</body>
</html>



